<template>
	<div>
		<h2>就业地区分布示意图</h2>
		<div id="areaEcharts">
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		name: 'areaEcharts',
		data() {
			return {
				// industry: [],
				// ratio: [],
			}
		},
		mounted() {
			this.getData();
			// this.drawLine();
		},
		methods: {

			getData() {

				var param = this.$qs.stringify({
					majorId: '1793',
				});
				console.log(param);
				this.$axios.post('echarts/showAreaById', param)
					.then(rst => {
						var area = [];
						var ratio = [];
						for (var i = 0; i < rst.data.length; i++) {
							area[i] = rst.data[i].area;
							ratio[i] = rst.data[i].ratio;
						}
						// this.data = rst.data.industry;
						// console.log(this.area);
						// console.log(this.ratio);
						this.drawLine(area, ratio)
					}, error => {
						console.log(error)
					})
			},

			drawLine(area, ratio) {
				var myChart = echarts.init(document.getElementById('areaEcharts'));

				// 指定图表的配置项和数据
				var option = {
					title: {
						text: '就业地区分布',

					},
					tooltip: {},
					legend: {
						data: ["就业地区分布率"]
					},
					toolbox: {
						show: true,
						feature: {
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ["line", "bar", "pie"]
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: {
						data: area,
						//文字竖放
						axisLabel: {
							interval: 0,
							formatter: function(value) {
								return value.split("").join("\n");
							}
						}

					},
					yAxis: {},
					series: [{
						name: '就业地区分布率',
						type: 'bar',
						data: ratio,
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						},
						itemStyle: {
							normal: {
								//这里是重点
								color: function(params) {
									//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
									var colorList = ['#c23531', '#2f4554', '#61a0a8', '#61a896', '#a875a6',
										'#61a0a8', '#d48265', '#91c7ae', '#749f83', '#caa970'
									];
									return colorList[params.dataIndex]
								}
							}
						}

					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize()
				});
			},
		},
		watch: {
			area: [],
			ratio: [],
		},
		created() {

		}
	}
</script>

<style scoped>
	h2 {
		text-align: center;
		padding: 30px;
		font-size: 18px;
	}

	#areaEcharts {
		width: 500px;
		height: 500px;
		border: 1px;
		margin: 0 auto;
	}
</style>
